<template>

  <!-- 商品管理页面 -->

  <Layout>
    <el-card class="box-card">
      <div style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
        <h2 style="display: flex;justify-content: flex-start;padding-left: 10px;">圈子管理</h2>
        <div style="width: 100%;margin-top: 10px;">
          <el-form :model="queryForm" :inline="true" label-width="60px">
            <el-form-item label="内容">
              <el-input v-model="queryForm.content" placeholder="请输入内容" size="small" clearable=""></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain size="mini" @click="handleSs()">查询</el-button>
              <!--              <el-button type="info" plain size="mini" @click="handleCz()">重置</el-button>-->
<!--              <el-button type="info" plain size="mini" @click="handleEdit()">新增</el-button>-->
            </el-form-item>
          </el-form>
          <el-table :data="springList" style="width: 100%" v-loading="loading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.4)">
            <el-table-column label="ID" prop="id" width="50px"></el-table-column>
                        <el-table-column label="发布昵称" prop="nickname" align="center" width="200px"></el-table-column>


            <el-table-column label="发布内容" prop="content" align="center" width="210px"></el-table-column>
            <el-table-column label="发布时间" prop="time" align="center">
            </el-table-column>
            <el-table-column label="发布图片" prop="images" align="center" width="100%">
              <template slot-scope="scope">
                <el-image style="width: 100px; height: 50px" :src="item" fit="cover" v-for="item in scope.row.images">
                </el-image>
              </template>
            </el-table-column>


            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="mini" style="color: red;" @click="handleDel(scope.row.id)"
                           icon="el-icon-delete">
                  删除
                </el-button>
                <el-button type="text" size="mini" style="color: red;" @click="handleEdit(scope.row.id)"
                           icon="el-icon-edit">
                  查看评论
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- current-page.sync当前页数 -->
        <!-- total总条目数 -->
        <!-- page-size显示条数 -->
        <!-- layout	组件布局，子组件名用逗号分隔 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="queryForm.page" :page-size="queryForm.limit"
                       layout="total, sizes, prev, pager, next, jumper" :total="total" style="padding: 20px 0;">
        </el-pagination>

      </div>

    </el-card>
    <el-dialog :visible.sync="showDialog" title="评论管理" @close="showDialog = false">
    <div style="width: 100%;margin-top: 10px;">

      <el-table :data="commentList" style="width: 100%" v-loading="loading" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.4)">
        <el-table-column label="ID" prop="id" width="50px"></el-table-column>
        <el-table-column label="评论昵称" prop="nickname" align="center" width="200px"></el-table-column>
<!--        <el-table-column label="头像" prop="avatar" align="center" width="100%">-->
<!--          <template slot-scope="scope">-->
<!--            <el-image style="width: 100px; height: 50px" :src="scope.row.avatar" fit="cover">-->
<!--            </el-image>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="评论内容" prop="content" align="center" width="210px"></el-table-column>
        <el-table-column label="评论时间" prop="time" align="center"
                         width="160px">
          <template slot-scope="scope">
            <div>{{ getTime(scope.row.time) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="回复的用户" prop="replyNickname" align="center"></el-table-column>


        <el-table-column label="操作" align="center">
          <template slot-scope="scope">

            <el-button type="text" size="mini" style="color: red;" @click="handleDel(scope.row.id)"
                       icon="el-icon-delete">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- current-page.sync当前页数 -->
    <!-- total总条目数 -->
    <!-- page-size显示条数 -->
    <!-- layout	组件布局，子组件名用逗号分隔 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="queryForm1.page" :page-size="queryForm1.limit"
                   layout="total, sizes, prev, pager, next, jumper" :total="commentTotal" style="padding: 20px 0;">
    </el-pagination>
    </el-dialog>
  </Layout>
</template>

<script>
// import axios from 'axios';
import {weChatTimeFormat} from '@/utils/time'

export default {
  data() {
    return {
      // 商品列表
      springList: [],
      commentList:[],
      commentTotal:0,
      token: "",
      total: 0,
      queryForm: {
        page: 1,
        limit: 10,
        content: ''
      },
      queryForm1: {
        page: 1,
        limit: 10,
        circleId: 0
      },
      form: {},
      loading: false,
      showDialog: false,
      header: {
        "token": localStorage.getItem("Admin-Token")
      },
      updateData: {
        type: 1 //表示上传的是头像
      },
      updateUrl: process.env.VUE_APP_BASE_API + "/uploadFile",
      isAdd: false//false是编辑，true是新增
    };
  },
  created() {
    this.getList()
  },
  methods: {
    getTime(time) {
      return weChatTimeFormat(time)
    },
    getList() {
      this.loading = true
      this.token = localStorage.getItem('Admin-Token');
      this.$axios.get('/admin/circle/list',
          {
            params: this.queryForm
          }
      ).then(res => {
        this.springList = res.data.data.list
        for (const springListElement of this.springList) {
          springListElement.images = JSON.parse(springListElement.images)
        }

        this.total = res.data.data.total
        // this.loading = false
        // console.log(this.springList)
        console.log(res.data)
      })
          .catch(e => {
            console.log(e)
          })
          .finally(() => {
            this.loading = false
            console.log(this.loading, "111")
          })
    },
    //分页

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      // this.queryForm.pageNum=1;
      this.queryForm.limit = val;
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryForm.page = val;
      this.getList()
    },
    // 删除商品列表
    handleDel(id) {
      this.$confirm('确定删除ID为：' + id + '的圈子吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        // 删除选择的数据
        this.$axios.post("/admin/circle/delete",

            {
              id: id
            }
        ).then((res) => {
          // location.reload(); // 刷新页面
          if (res.data.code == 0) {
            this.getList();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          } else {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }


        })
            .catch((res) => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
              console.log("删除", id)

            })
      }).catch((res) => {
      })
    },

    // 搜索按钮
    handleSs() {
      this.queryForm.page = 1;
      this.getList();
    },
    // 重置按钮
    handleCz() {
      this.queryForm = {
        page: 1,
        limit: 10
      }
      this.handleSs()
    },
    //点击查看按钮
    handleEdit(id) {
      this.queryForm1.circleId = id
       this.$axios.get("/admin/comment/list",{
         params: this.queryForm1
       }).then(res=>{
         this.showDialog = true//显示对话框
         this.commentList = res.data.data.list
         this.commentTotal = res.data.data.total
       })

    },
    //处理头像上传成功
    handleAvatarSuccess(res, file) {
      this.form.avatar = res.data;
    },
    //提交编辑
    submit() {

      this.$axios.post("/admin/updateUserInfo", this.form).then(res => {

        if (res.data.code == 0) {
          this.getList()
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.showDialog = false //隐藏对话框
        } else {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          });
        }
      })
      // this.$axios({
      //   methods:"post",
      //   url:"/admin/updateUserInfo",
      //   data:this.form
      // }).then(res=>{
      //   if(res.data.code==0){
      //     this.getList()
      //     this.$message({
      //       message: '修改成功',
      //       type: 'success'
      //     });
      //   }else{
      //     this.$message({
      //       message: res.data.msg,
      //       type: 'warning'
      //     });
      //   }
      // })
    }
  }
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>